<template>
  <div class="limit-container">
    <el-result
      icon="warning"
      title="调用次数已用完"
      :sub-title="subTitle"
    >
      <template #extra>
        <div class="contact-info">
          <p>如需增加调用次数，请联系作者：</p>
          <el-tag size="large">{{ author }}</el-tag>
        </div>
        <el-button type="primary" @click="handleBack">返回首页</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const domain = ref('')
const author = ref('')
const subTitle = ref('')

onMounted(() => {
  // 从 URL 参数获取域名和作者信息
  domain.value = route.query.domain || ''
  author.value = route.query.author || '未知'
  subTitle.value = `域名 ${domain.value} 的调用次数已用完`
})

const handleBack = () => {
  router.push('/')
}
</script>

<style scoped>
.limit-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.contact-info {
  text-align: center;
  margin-bottom: 20px;
  
  p {
    margin-bottom: 10px;
    color: #606266;
  }
  
  .el-tag {
    font-size: 16px;
    padding: 8px 16px;
  }
}
</style> 